<template>
  <view>
    <Search />
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      circular
      indicator-color="#77777e"
      indicator-active-color="#ea4350"
    >
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <navigator
          class="swiper_navigator"
          :url="item.navigator_url"
          :open-type="item.open_type"
          hover-class="className"
        >
          <image class="swiper_image" :src="item.image_src" mode="aspectFill" />
        </navigator>
      </swiper-item>
    </swiper>
    <view class="nav">
      <navigator
        class="nav_image"
        v-for="item in navData"
        :key="item.name"
        :url="item.navigator_url"
        :open-type="item.open_type"
        hover-class="none"
      >
        <image :src="item.image_src" mode="aspectFill" />
      </navigator>
    </view>
    <view class="footer" v-for="(item, index) in footerData" :key="index">
      <view class="floor_title">
        <image
          class="floor_title_image"
          :src="item.floor_title.image_src"
          mode="aspectFill"
        />
      </view>
      <view class="floor_list">
        <navigator
          class="floor_list_item"
          v-for="item2 in item.product_list"
          :key="item2.name"
          :open-type="item2.open_type"
          :url="item2.navigator_url"
          hover-class="none"
        >
          <image
            class="floor_list_image"
            :src="item2.image_src"
            mode="aspectFill"
            :style="'width:' + item2.image_width + 'rpx'"
          />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/search/index.vue";
import { getSwiper, getCatitems, getFloor } from "../../api/index";
export default {
  components: {
    Search,
  },
  data() {
    return {
      swiperData: [],
      navData: [],
      footerData: [],
    };
  },
  async onLoad() {
    try {
      const res = await getSwiper();
      console.log("轮播图", res);
      this.swiperData = res.data.message;
      const res2 = await getCatitems();
      console.log("分类", res2);
      this.navData = res2.data.message;
      const res3 = await getFloor();
      console.log("楼层", res3);
      res3.data.message.forEach((item) => {
        item.product_list.forEach((item2) => {
          item2.navigator_url = item2.navigator_url.replace("?", "/main?");
        });
      });
      this.footerData = res3.data.message;
    } catch (error) {
      console.log(error);
    }
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 340rpx;
  .swiper_navigator {
    height: 340rpx;
    .swiper_image {
      width: 100%;
      height: 100%;
    }
  }
}
.nav {
  padding: 12rpx 0 40rpx;
  display: flex;
  justify-content: space-evenly;
  .nav_image {
    width: 128rpx;
    height: 140rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.footer {
  .floor_title {
    .floor_title_image {
      width: 750rpx;
      height: 60rpx;
    }
  }
  .floor_list {
    overflow: hidden;
    .floor_list_item {
      float: left;
      margin-left: 13rpx;
      margin-bottom: 10rpx;
      &:nth-child(1) {
        .floor_list_image {
          height: 386rpx;
        }
      }
      .floor_list_image {
        height: 188rpx;
        vertical-align: top;
      }
    }
  }
}
</style>